<template>
  <div ref="elRef">
    <div @click="click">
      <slot></slot>
    </div>
  </div>
</template>
<script setup>
import Clipboard from 'clipboard'
import { ElMessage } from 'element-plus'
// import useClipboard from 'vue-clipboard3'

const props = defineProps({
  text: String,
})

const elRef = ref()

// const { toClipboard } = useClipboard()

const click = async () => {
  // try {
  //   await toClipboard(props.text)
  //   ElMessage.success('复制成功')
  // } catch (e) {
  //   ElMessage.error('复制失败')
  //   console.error(e)
  // }

  let clipboard = new Clipboard(elRef.value, {
    text: () => props.text,
    action: () => 'copy',
    container: document.body,
  })

  elRef.value.click()

  clipboard.on('success', (e) => {
    ElMessage.success('复制成功')
    clipboard.destroy()
  })
  clipboard.on('error', (e) => {
    ElMessage.error('复制失败')
    clipboard.destroy()
  })
}
</script>
<style lang="scss" scoped></style>
